<template>
	<!--  -->
	<div class="mainContent sportnew">
		<div class="bread-nav">
			<span class="bread-item">仓储管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">物料调拨</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item activeNavs" @click="back">物料调拨列表</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">详情</span>
			
		</div>
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="调拨单详情" name="1"></el-tab-pane>
				<el-tab-pane label="操作日志" name="2"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.refundStep.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">调拨单基础信息</p>
					</div>
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               tab1  订单详情                 ************************************** -->
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">调拨明细</p>
						</div>
						<div class="detailTableDetail">
							<el-table stripe :data="Model.tableData" border @selection-change="handleSelectionChange">
								<!-- <el-table-column type="index" width="50" label="序号" fixed></el-table-column> -->
								<el-table-column prop="goodsPicture" align="center" label='商品图片'>
									<template slot-scope="scope">
										<div class="scopecont">
											<el-tooltip placement="top" effect="light">
												<div slot="content"><img class="maxTableImg" :src="scope.row.goodsPicture" alt=""></div>
												<img class="mainTableImg" :src="scope.row.goodsPicture" alt="">
											</el-tooltip>
										</div>
									</template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tableHeaderData"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- ******************************** 							tab1  操作日志						**********************************-->
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">操作日志 </p>
						</div>
						<div class="detailTableDetail">
							<el-table stripe :data="Model.tableData2" border @selection-change="handleSelectionChange">
								<!-- <el-table-column type="index" width="50" label="序号" fixed></el-table-column> -->
								<el-table-column prop="goodsPicture" align="center" label='商品图片'>
									<template slot-scope="scope">
										<div class="scopecont">
											<el-tooltip placement="top" effect="light">
												<div slot="content"><img class="maxTableImg" :src="scope.row.goodsPicture" alt=""></div>
												<img class="mainTableImg" :src="scope.row.goodsPicture" alt="">
											</el-tooltip>
										</div>
									</template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tableHeaderData2"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
			</div>
			
		</div>
		
		<!-- 导入文件 弹窗 -->
		
		
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "newPage",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
<style>
	
</style>
